<template>
	<view class="content">

		<view class="tab_div">
			<view class="tab_item" @click.stop="onSelStatus('1')">
				<view :class="curr_tab == '1' ? 'tab_txt_sel' : 'tab_txt'">待接单</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('2')">
				<view :class="curr_tab == '2' ? 'tab_txt_sel' : 'tab_txt'">已接单</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('3')">
				<view :class="curr_tab == '3' ? 'tab_txt_sel' : 'tab_txt'">已拒绝</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('')">
				<view :class="curr_tab == '' ? 'tab_txt_sel' : 'tab_txt'">全部</view>
			</view>
		</view>

		<view style="width: 100%;height: 1rpx;background-color: #eee;"></view>

		<view class="install_list_div">
			<view class="install_item" v-for="(item,index) in data_list" :key="item.id">
				<!-- <view style="display: flex;justify-content: space-between;">
					<view>订单编号：{{item.order_sn}}</view>
					<view style="color: orangered;font-weight: bold;">{{getStatusTxt(item.status)}}</view>
				</view> -->

				<view style="display: flex;align-items: center;justify-content: space-between;">
					订单编号：{{item.order_sn}}
					<view v-if="item.status == 1" style="color: deepskyblue;font-weight: bold;">待接单</view>
					<view v-if="item.status == 2" style="color: orange;font-weight: bold;">已接单</view>
					<view v-if="item.status == 3" style="color: orangered;font-weight: bold;">拒绝接单</view>
					<view v-if="item.status == 4" style="color: darkgray;font-weight: bold;">绑定TMS</view>
				</view>
				<view v-if="item.factor_name">发货厂家：{{item.factor_name}}</view>
				<view>发货地址：{{item.sender_area}}{{item.sender_address}}</view>
				<view>发货人：{{item.sender_name}} {{item.sender_mobile}}</view>
				<view>收货地址：{{item.receiver_area}}{{item.receiver_address}}</view>
				<view>收货人：{{item.receiver_name}} {{item.receiver_mobile}}</view>

				<view class="op_btn_div">
					<!-- <view v-if="item.status == 2" class="btn1" @click.stop="onBindTms(item)">绑定运单</view> -->
					<!-- <view class="btn2" @click.stop="onConfirm(item)">订单确认</view> -->
					<view class="btn1" @click.stop="onItemClick(item)">查看详情</view>
				</view>

			</view>

			<view v-if="!data_list || data_list.length <= 0" style="width: 100%;text-align: center;margin: 10vh 0 10vh 0;">
				暂无数据~
			</view>

		</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						扫码评价
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view class="pop_div_2_1_hint">请提示用户扫码评价</view>
						</view>
						<view>
							<!-- <image class="img_qrcode" mode="aspectFit" :src="qrdata"></image> -->
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="genQrContent()"></uqrcode>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">请向客户展示</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { URL } from '@/http/request.js'
	import { getUInfo, timestampToYMDHM, getStatusTxt } from '@/util/util.js'
	import { checkUpdate } from '@/util/uni_util.js'
	const base64 = require('@/util/oss/base64.js')
	export default {
		data() {
			return {
				curr_tab: '1', // 记录当前选择的tab代表的状态
				data_list: [],
				curr_ins: {}, // 记录当前操作的安装对象

				page: 1,
				limit: 20,
			}
		},

		mounted() {
			// console.log('current.ver=20250409.1433a');
			this.getDataList()
		},

		onLoad(opts) {
			let that = this
		},

		onShow() {
			checkUpdate()
			let that = this
		},

		// 下拉刷新
		onPullDownRefresh() {
			// #ifdef WEB
			console.log('web页面...');
			// #endif
			// #ifdef H5
			console.log('h5页面...');
			// #endif
			// #ifdef MP-WEIXIN
			console.log('微信小程序页面...');
			// #endif
			this.page = 1
			this.data_list = []
			this.getDataList()
		},

		// 到达底部
		onReachBottom() {
			// console.log('已到达底部...');
			this.page++
			this.getDataList()
		},

		methods: {

			// 点击数据项
			onItemClick(item) {
				uni.navigateTo({ url: `/pages/mine/waybill/waybill_detail?id=${item.id}&from=99` })
			},
			// ''代表全部
			onSelStatus(status) {
				this.curr_tab = status
				this.page = 1
				this.data_list = []
				this.getDataList()
			},

			// 拨打电话
			onPhone(item) {
				if (!item || !item.mobile) {
					uni.showToast({ icon: 'none', title: '号码有误!' })
				}
				uni.makePhoneCall({ phoneNumber: `${item.mobile}` })
			},

			// 查看锁体照片
			onCheckImg(url) {
				uni.previewImage({
					urls: [url],
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				});
			},

			// 上传图片
			onUpload(item) {
				uni.showToast({ icon: 'none', title: '上传图片' })
				uni.navigateTo({ url: `/pages/order_detail/order_detail?detail=${JSON.stringify(item)}` })
			},

			// 二维码
			onShowQrCode() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			onClosePop() {
				this.$refs.popup.close()
			},

			// 生成二维码文本数据
			genQrContent() {
				// const url = 'https://wwwoo.goho.co' // 花生壳测试
				// const url = 'http://192.168.1.2:8080' // 本地ip测试
				const url = 'http://install.niuniuhaohan.com' // 正式站
				return `${url}/#/pages/evaluate/evaluate?install_id=${this.curr_ins.id}`
			},

			// 接口:数据列表
			async getDataList() {
				let that = this
				let status = that.curr_tab
				let token = getUInfo().token
				uni.showLoading({ title: '加载中..', mask: true, })
				let res = await that.$getOrderList({ token, status, page: this.page, page_size: this.limit, })
				if (res.code == 1) {
					let data = res.data.data
					if (!data || data.length <= 0) {
						uni.showToast({ icon: 'none', title: '暂无更多数据' })
						return
					}
					this.data_list = this.data_list.concat(data)
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			getStatusTxt(status) {
				return getStatusTxt(status)
			},

			timestampToDateFormat(ts) {
				return timestampToYMDHM(1000 * ts)
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #f8f8f8;
	}

	.tab_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		position: fixed;
		z-index: 1;
		background-color: white;
	}

	.tab_item {
		flex-grow: 1;
		text-align: center;
		height: 100%;
		line-height: 88rpx;
	}

	.tab_txt {
		font-size: 29rpx;
		font-weight: normal;
		color: #222;
	}

	.tab_txt_sel {
		font-size: 29rpx;
		font-weight: bold;
		color: #1890FF;
	}

	.install_list_div {
		display: flex;
		flex-direction: column;
		width: 100vw;
		margin: 88rpx 0 0 0;
	}

	.install_item {
		display: flex;
		flex-direction: column;
		/* height: 300rpx; */
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
		/* background-color: rgba(249, 233, 198, 1); */
		background-color: white;
		overflow: scroll;
		/* overflow: hidden; */
		border-radius: 16rpx;
		font-size: 30rpx;
		color: black;
	}

	/* 锁体照片 */
	.img_lock {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 16rpx 0 0;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 0 0 0;
		font-size: 26rpx;
	}

	.btn1 {
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: solid #000 1px;
		border-radius: 8rpx;
		margin: 0 0 0 20rpx;
	}

	.btn2 {
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: red;
		border: solid red 1px;
		border-radius: 8rpx;
		margin: 0 0 0 20rpx;
	}

	.btn3 {
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: solid #000 1px;
		border-radius: 8rpx;
		margin: 0 0 0 20rpx;
	}


	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 48vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>